<template>
  <div id='main' style='height:30px;background:#d9e4ec' >
    <template  v-model="isCollapse">
      <span class="iconfont" style='padding: 0 10px;' @click="handleControl">&#xe607;</span>
      <!-- <span class="iconfont" style='padding-right:10px;' @click="handleOpen">&#xe661;</span> -->
    </template>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="item in tabList">
        <el-breadcrumb-item>{{item}}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'HomeMain',
  data () {
    return{
      isCollapse: false
    }
  },
  computed:{
    tabList: function() {
      return this.$store.state.list;
    }
  },
  methods:{
    handleControl(){
      let self=this;
      self.isCollapse=!self.isCollapse;
      self.$store.dispatch('controlShow',self.isCollapse)
    }
    // handleOpen(){
    //   let self=this;
    //   self.isCollapse=!self.isCollapse;
    //   self.$store.dispatch('controlShow',self.isCollapse)
    // }
  }
}
</script>

<style lang="scss" scoped>
  #main{
    display: flex;
    align-items: center;
    height: 25px;
  }
</style>
